<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>账单管理</span>
            </div>
            <div>
                <div style="float: left">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="缴费状态">
                            <el-select v-model="paymentState" clearable placeholder="请选择">
                                <!-- <el-option label="全部" value="全部"></el-option> -->
                                <el-option label="待缴纳" value="待缴纳"></el-option>
                                <el-option label="已缴纳" value="已缴纳"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="住户类型">
                            <el-select v-model="type" clearable placeholder="请选择">
                                <el-option label="账单名称" value="账单名称"></el-option>
                                <el-option label="账单编号" value="账单编号"></el-option>
                                <!-- <el-option label="房间号码" value="房间号码"></el-option> -->
                                <!-- <el-option label="住户姓名" value="住户姓名"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-form>

                </div>
                <div style="float: left">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="收费项目">
                            <el-select v-model="nameType" clearable placeholder="请选择">
                                <!-- <el-option label="全部" value="全部"></el-option> -->
                                <el-option label="电费" value="电费"></el-option>
                                <el-option label="燃气费" value="燃气费"></el-option>
                                <el-option label="水费" value="水费"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div style="float: left; margin-left: 60px">
                        <el-input style="width: 300px" v-model="name" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <div>
                    <el-button style="float: right" type="primary" @click="reset()">重置</el-button>
                    <el-button style="float: right; margin-right: 30px" type="primary" @click="findIdBill()">查询
                    </el-button>
                </div>
            </div>
        </el-card>
        <el-card style="margin-top: 20px">
            <div slot="header" class="clearfix">
                <span>账单列表</span>
                <div class="e2" style="float: right">
                    <el-button type="primary" size="mini" style="margin-right: 10px" @click="$router.push('/addBill')">
                        新建
                    </el-button>
                    <!-- <el-button type="primary" size="mini" style="margin-right: 10px">批量操作</el-button> -->
                </div>
            </div>

            <div>
                <el-table ref="multipleTable" :data="bills" tooltip-effect="dark" style="width: 100%">
                    <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                    <el-table-column label="房间号" width="120">
                        <template slot-scope="scope">
                            <div v-if="scope.row.howMany != null">
                                {{ scope.row.howMany }}楼{{ scope.row.cellNumber }}单元{{ scope.row.howFloor }}0{{
                                        scope.row.howPortal
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="收费类型" width="120">
                    </el-table-column>
                    <el-table-column label="单价" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == '水费'">
                                1000元/㎡
                            </div>
                            <div v-else-if="scope.row.type == '电费'">
                                1000元/度
                            </div>
                            <div v-else>
                                1000元/天
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="chargeCycle" label="收费周期" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="money" label="费用合计" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="paymentState" label="缴费状态" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="updateBill(scope.row)">编辑</el-button>
                            <el-button type="text" @click="delBill(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bills: [],
            paymentState: '',
            type: '',
            nameType: '',
            name: '',
            // residentsList: [],
            // identity: "",
            // state: "",
            // communityId: "",
            // dialogFormVisibleEdit: false, // 用于用户编辑弹窗控制关闭
            // // 分页字段
            // page: {},
            // tableData: [],
            // multipleSelection: [],
        }
    },
    mounted() {
        this.drawLine();
    },
    created() {
        this.findAll()
        this.countWorkbench()
        this.drawLine();
    },
    methods: {
        reset() {
            this.paymentState = '',
                this.type = '',
                this.nameType = '',
                this.name = '',
                this.findAll()
        },
        delBill(row) {
            this.$axios
                .get("systemuser/payment-type/delBill/" + row.paymentTypeId)
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.findAll()
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        updateBill(row) {
            this.$router.push({ path: '/updateBill', query: { paramName: row } })
        },
        findAll() {
            this.$axios
                .get("systemuser/payment-type/findBill")
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.bills = res.data.data.bills
                        console.log(this.residentsList)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },

        findIdBill() {
            this.$axios
                .post("systemuser/payment-type/findIdBill", {
                    paymentState: this.paymentState,
                    type: this.type,
                    nameType: this.nameType,
                    name: this.name,
                })
                .then(res => {
                    if (res.data.code == 20000) {
                        console.log("成功")
                        this.bills = res.data.data.bills
                        console.log(this.residentsList)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },

        drawLine() {
            var chartDom = document.getElementById('chart');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };

            option && myChart.setOption(option);
        },


        // drawLine() {
        //   // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        //   let myChart = this.$echarts.init(document.getElementById("chart"));
        //   var that = this;
        //   this.$axios.get("/book/getzhutu").then((res) => {
        //     // debugger;
        //     console.log(res.data);
        //     //还需声明一个空数组来存放与柱状条数据对应的名称
        //     //获取到的数据需要转换成Json字符串,这里我也不是很明白，在控制台调试的时候，获取到的数据都是[object,Object]这样的格式，所以我只能转换一下
        //     let outdata = JSON.stringify(res.data.obj);
        //     //这里还需eval来处理一下字符串转为json对象，如此就能获取到数据了
        //     let xqo = eval("(" + outdata + ")");
        //     //根据返回的数据，循环遍历出你要展示的数据
        //     for (var i in xqo) {
        //       //这里我展示的是后台返回的每条数据里面的bookname和num
        //       that.nameX.push(xqo[i].yue);
        //       that.timeY.push(xqo[i].zongshu);
        //     }
        //     // 绘制图表s
        //     let option = {
        //       xAxis: {
        //         type: "category",
        //         data: that.nameX,
        //       },
        //       yAxis: {
        //         type: "value",
        //       },
        //       series: [
        //         {
        //           data: that.timeY,
        //           type: "bar",
        //           showBackground: true,
        //           backgroundStyle: {
        //             color: "rgba(180, 180, 180, 0.2)",
        //           },
        //         },
        //       ],
        //     };
        //     myChart.setOption(option);
        //   });
        // },
    }
}
</script>
<style scoped>
</style>